<template>
  <el-drawer direction="rtl" :visible="openView" :before-close="onCloseView" :show-close="false" size="750px" :with-header="false">
    <!-- 操作信息 -->
    <el-descriptions title="操作信息" direction="vertical" :column="4" border class="descriptions-container">
      <el-descriptions-item label="日志编号">{{ operateLog.id }}</el-descriptions-item>
      <el-descriptions-item label="操作地址">{{ operateLog.operateLocation }}（{{ operateLog.operateIp }}）</el-descriptions-item>
      <el-descriptions-item label="请求用户" :span="2">{{ operateLog.nickname }}</el-descriptions-item>
      <el-descriptions-item label="请求方法" :span="4">{{ operateLog.methodName }}</el-descriptions-item>
      <el-descriptions-item label="操作类型">
        <el-tag type="success" v-if="operateLog.type === 'ADD'">新增</el-tag>
        <el-tag type="primary" v-else-if="operateLog.type == 'UPDATE'">修改</el-tag>
        <el-tag type="danger" v-else-if="operateLog.type === 'DELETE'">删除</el-tag>
        <el-tag type="warning" v-else-if="operateLog.type === 'SELECT'">查询</el-tag>
        <el-tag type="info" v-else>其他操作</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="请求内容">{{ operateLog.operateContent }}</el-descriptions-item>
      <el-descriptions-item label="请求方式" :span="2">
        <el-tag type="primary" v-if="operateLog.requestMethod === 'POST'">POST</el-tag>
        <el-tag type="success" v-else-if="operateLog.requestMethod === 'GET'">GET</el-tag>
        <el-tag type="warning" v-else-if="operateLog.requestMethod === 'PUT'">PUT</el-tag>
        <el-tag type="danger" v-else>DELETE</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 接口信息 -->
    <el-descriptions title="接口信息" direction="vertical" :column="4" border class="descriptions-container">
      <el-descriptions-item label="请求参数" :span="4">{{ operateLog.operateParam }}</el-descriptions-item>
      <el-descriptions-item label="返回参数" :span="4">{{ operateLog.operateResult }}</el-descriptions-item>
      <el-descriptions-item label="请求状态">
        <div v-if="operateLog.status">
          <div class="dot-success"></div>
          <span>正常</span>
        </div>
        <div v-else>
          <div class="dot-danger"></div>
          <span>失败</span>
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="请求时间">{{ operateLog.createTime | dateFilter }}</el-descriptions-item>
      <el-descriptions-item label="请求耗时" :span="2">{{ operateLog.costTime }}ms</el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script>
export default {
  name: 'ViewDrawer',

  data () {
    return {
      // 操作信息参数
      operateLog: {},
      // 是否打开对话框
      openView: false
    }
  },

  mounted () {

  },

  methods: {
    // 打开抽屉
    handleView (row) {
      this.openView = true
      this.operateLog = row
    },
    // 关闭抽屉
    onCloseView () {
      this.openView = false
    }
  }
}
</script>

<style lang="scss" scoped>
.descriptions-container {
  padding: 1.5rem;
}
.el-divider {
  margin: 1rem 0;
}
</style>
